import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'

class Message extends React.PureComponent {
  static propTypes = {
    message: React.PropTypes.oneOfType([
      React.PropTypes.element,
      React.PropTypes.string,
    ]).isRequired,
  }

  constructor(props) {
    super(props)
    this.state = { show: false }
  }

  show() {
    this.setState({ show: true })
  }

  render() {
    const { message } = this.props
    const { show } = this.state
    const display = show ? 'block' : 'none'

    return (
      <div
        style={{ display }}
      >
        <div className="message">
          <div className="message-content">
            <span className="message-img">
              <img src="../../../images/icons/att@2x.png" alt="" />
            </span>
            {message}
          </div>
        </div>
      </div>
    )
  }
}

Message.newInstance = function newDialogInstance(props) {
  const div = document.createElement('div')
  document.body.appendChild(div)

  const message = ReactDOM.render(<Message {...props} />, div)

  return {
    component: message,
    open() {
      message.show()
    },
    destroy() {
      ReactDOM.unmountComponentAtNode(div)
      document.body.removeChild(div)
    },
  }
}

export default Message
